<template>
	<view>
		<view class="player">
			<view class="background">
				<view class="filter"></view>
				<image :src="list.al.picUrl"></image>
			</view>
			<view class="middle">
				<view class="middle-box">
					<view class="cd-box" @tap="toggle">
						<view class="cd">
							<image :src="list.al.picUrl"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<audio :src="url" controls :poster="list.al.picUrl" :name="list.name" :author="list.ar[0].name"></audio>
	</view>
</template>

<script>
	const audio = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				url: '',
				list: [],
				flag: 'playing'
			}
		},
		onLoad(option) {
			const song = JSON.parse(decodeURIComponent(option.song))
			this.list = song
			var serverUrl = this.serverUrl
			uni.request({
				url: serverUrl + `/song/url?id=${song.id}`,
				method: "GET",
				success: (res) => {
					if(res.data.code === 200){
						this.url = res.data.data[0].url
						console.log(this.url)
						audio.src = this.url
						if(this.flag === 'playing'){
							audio.play()
						}else{
							audio.pause()
						}
					}
				}
			})
		},
		methods: {
			toggle(){
				audio.pause()
			}
		}
	}
</script>

<style>
.player{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 150;
	background: #f2f3f4;
}
.background{
	position: absolute;
	left: -50%;
	top: -50%;
	width: 300%;
	height: 300%;
	z-index: -1;
	opacity: 0.6;
	filter: blur(60rpx);
}
.filter{
	position: absolute;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0.6;
}
.middle{
	display: flex;
	align-items: center;
	position: fixed;
	width: 100%;
	top: 160rpx;
	bottom: 240rpx;
}
.middle-box{
	display: inline-block;
	vertical-align: top;
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 80%;
}
.cd-box{
	position: absolute;
	left: 10%;
	top: 0;
	width: 80%;
	height: 100%;
}
.cd{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-radius: 50%;
}
image{
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
audio{
	position: absolute;
	bottom: 0;
	z-index: 151;
	width: 100%;
}

</style>
